/**
 * 工具相关工具函数集合
 * 提供工具展示所需的随机图标、渐变色、图片处理等功能
 */

import { computed, onMounted } from 'vue';

/**
 * 随机emoji图标列表
 * 用于生成工具卡片的默认图标
 */
const emojiIcons = ['💡', '💻', '🧭', '🐠', '📊', '🧠'];

/**
 * 获取随机emoji图标
 * 从预定义的emoji列表中随机选择一个
 * @returns {string} 随机选择的emoji字符
 */
const getRandomEmoji = (): string => {
  const randomIndex = Math.floor(Math.random() * emojiIcons.length);
  return emojiIcons[randomIndex] || '💡';  // 如果获取失败，返回默认的灯泡图标
};

/**
 * 生成随机渐变色
 * 从预定义的颜色组合中随机选择一组渐变色
 * @returns {[string, string]} 包含两个颜色值的数组，用于渐变效果
 */
const randomTitleGradient = (): [string, string] => {
  // 预定义的渐变色组合
  const colors = [
    ['#667eea', '#764ba2'],
    ['#4facfe', '#00f2fe'],
    ['#43e97b', '#38f9d7'],
    ['#fa709a', '#fee140'],
    ['#30cfd0', '#330867'],
    ['#a8edea', '#fed6e3'],
    ['#ff9a9e', '#fecfef'],
    ['#ffecd2', '#fcb69f'],
    ['#ff8a80', '#ff5722'],
    ['#84fab0', '#8fd3f4'],
    ['#a1c4fd', '#c2e9fb'],
    ['#d4fc79', '#96e6a1'],
    ['#fddb92', '#d1fdff'],
    ['#9890e3', '#b1f4cf']
  ];
  const randomIndex = Math.floor(Math.random() * colors.length);
  return colors[randomIndex] as [string, string];
};

/**
 * 默认占位图 - 使用随机emoji
 * 当工具没有logo图片时，生成一个包含随机emoji的SVG占位图
 */
/**
 * 生成默认logo SVG
 * 创建一个包含随机emoji的SVG占位图
 * @returns {string} SVG数据URL
 */
export const generateDefaultLogo = (): string => {
  const emoji = getRandomEmoji();
  // 生成包含emoji的SVG图片数据URL
  return `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"%3E%3Crect width="40" height="40" fill="%23f0f0f0"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="20" fill="%23666"%3E${emoji}%3C/text%3E%3C/svg%3E`;
};

/**
 * 默认占位图 - 使用随机emoji
 * 当工具没有logo图片时，生成一个包含随机emoji的SVG占位图
 */
export const defaultLogo = computed(() => {
  return generateDefaultLogo();
});

/**
 * 获取标题装饰线渐变色
 * 生成用于标题装饰线的随机渐变色
 */
export const titleLineGradient = computed(() => {
  const [from, to] = randomTitleGradient();
  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
});

/**
 * 生成随机渐变类名
 * 根据索引生成Tailwind CSS的渐变背景类名
 * @param {number} index - 索引值，用于确定颜色基础
 * @returns {string[]} 包含渐变类名的数组
 */
export const randomGradient = (index: number): string[] => {
  // Tailwind CSS颜色基础名称
  const bases = [
    'indigo', 'orange', 'green', 'blue', 'purple', 'rose', 'sky', 'pink', 'emerald', 'gray',
    'amber', 'teal', 'violet', 'lime', 'cyan', 'fuchsia', 'red', 'yellow', 'stone', 'neutral'
  ];
  // Tailwind CSS颜色深度
  const tones = ['300','400','500','600','700'];
  
  // 根据索引选择颜色基础，确保循环使用
  const base = bases[index % bases.length];
  // 随机选择颜色深度
  const tone = tones[Math.floor(Math.random() * tones.length)];
  // 构建渐变类名
  const from = `from-${base}-${tone}`;
  const to = `to-${base}-${tone}`;
  return ['bg-gradient-to-br', from, to];
};

/**
 * 图片加载失败处理函数
 * 当工具logo图片加载失败时，替换为默认的emoji占位图
 * @param {Event} event - 图片加载错误事件
 */
export const handleImageError = (event: Event): void => {
  const img = event.target as HTMLImageElement;
  img.src = generateDefaultLogo();
};

/**
 * 初始化图片懒加载
 * 使用IntersectionObserver实现图片的懒加载，提升页面性能
 * 当图片进入视口50px范围内时开始加载
 */
export const initLazyLoading = (): void => {
  onMounted(() => {
    // 获取所有需要懒加载的图片
    const images = document.querySelectorAll('.lazy-image');
    
    // 创建IntersectionObserver实例
    const imageObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        // 当图片进入视口时
        if (entry.isIntersecting) {
          const img = entry.target as HTMLImageElement;
          const src = img.getAttribute('data-src');
          if (src) {
            // 设置真实图片源并停止观察
            img.src = src;
            imageObserver.unobserve(img);
          }
        }
      });
    }, {
      rootMargin: '50px' // 提前50px开始加载，改善用户体验
    });
    
    // 为所有图片添加观察
    images.forEach(img => imageObserver.observe(img));
  });
};

/**
 * 工具工具函数组合式函数
 * 提供工具展示相关的工具函数，便于在组件中使用
 * @returns {Object} 包含工具函数的对象
 */
export const useToolUtils = () => {
  return {
    defaultLogo,           // 默认logo图片
    generateDefaultLogo,   // 生成随机默认logo函数
    handleImageError,      // 图片错误处理函数
    initLazyLoading        // 懒加载初始化函数
  };
};

/**
 * 标签颜色组合接口
 * 定义标签的背景色和文字颜色
 */
export interface TagColorCombination {
  /** 背景颜色类名 */
  bgColor: string;
  /** 文字颜色类名 */
  textColor: string;
}

/**
 * 预定义的标签颜色组合
 * 包含多种协调的背景色和文字颜色搭配
 */
const tagColorCombinations: TagColorCombination[] = [
  { bgColor: 'bg-indigo-100', textColor: 'text-indigo-600' },
  { bgColor: 'bg-purple-100', textColor: 'text-purple-600' },
  { bgColor: 'bg-pink-100', textColor: 'text-pink-600' },
  { bgColor: 'bg-rose-100', textColor: 'text-rose-600' },
  { bgColor: 'bg-blue-100', textColor: 'text-blue-600' },
  { bgColor: 'bg-cyan-100', textColor: 'text-cyan-600' },
  { bgColor: 'bg-teal-100', textColor: 'text-teal-600' },
  { bgColor: 'bg-green-100', textColor: 'text-green-600' },
  { bgColor: 'bg-emerald-100', textColor: 'text-emerald-600' },
  { bgColor: 'bg-yellow-100', textColor: 'text-yellow-600' },
  { bgColor: 'bg-orange-100', textColor: 'text-orange-600' },
  { bgColor: 'bg-red-100', textColor: 'text-red-600' },
  { bgColor: 'bg-slate-100', textColor: 'text-slate-600' },
  { bgColor: 'bg-gray-100', textColor: 'text-gray-600' },
  { bgColor: 'bg-zinc-100', textColor: 'text-zinc-600' }
];

/**
 * 获取随机标签颜色组合
 * 从预定义的颜色组合中随机选择一组
 * @returns {TagColorCombination} 随机选择的标签颜色组合
 */
export const getRandomTagColor = (): TagColorCombination => {
  const randomIndex = Math.floor(Math.random() * tagColorCombinations.length);
  return tagColorCombinations[randomIndex]!;
};

/**
 * 处理工具标签显示
 * 最多显示4个标签，前3个固定，第4个随机（如果标签数量大于4）
 * @param {string[]} tags - 原始标签数组
 * @returns {Array<{tag: string, color: TagColorCombination}>} 处理后的标签数组，包含颜色信息
 */
export const processToolTags = (tags: string[], isAll?: boolean): Array<{tag: string, color: TagColorCombination}> => {
  if (!tags || tags.length === 0) {
    return [];
  }

  // 如果标签数量小于等于4个或者isAll为true，直接全部显示
  if (tags.length <= 4 || isAll) {
    return tags.map(tag => ({
      tag,
      color: getRandomTagColor()
    }));
  }

  // 如果标签数量大于4个，显示前3个 + 随机1个
  const processedTags = tags.slice(0, 3).map(tag => ({
    tag,
    color: getRandomTagColor()
  }));

  // 从剩余的标签中随机选择一个
  const remainingTags = tags.slice(3);
  if (remainingTags.length > 0) {
    const randomIndex = Math.floor(Math.random() * remainingTags.length);
    processedTags.push({
      tag: remainingTags[randomIndex] || '',
      color: getRandomTagColor()
    });
  }

  return processedTags;
};